import React from 'react'
import PropTypes from 'prop-types'

class Input extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: ''
    }
  }
  render() {
    return <div>
      <input value={this.state.title} onChange={this.onTitleChange} />
      <button onClick={this.onSubmit}>提交</button>
    </div>
  }
  onTitleChange = (e) => {
    this.setState({
      title: e.target.value
    })
  }
  onSubmit = () => {
    const { submitTitle } = this.props
    submitTitle(this.state.title)

    this.setState({
      title: ''
    })
  }
}
// props 类型检查
Input.propTypes = {
  submitTitle: PropTypes.func.isRequired
}

class List extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    const { list } = this.props

    return <ul>{list.map((item, index) => {
      return <li key={item.id}>
        <span>{item.title}</span>
      </li>
    })}</ul>
  }
  // shouldComponentUpdate() {/*浅比较*/ }
}
// props 类型检查
List.propTypes = {
  list: PropTypes.arrayOf(PropTypes.object).isRequired
}

class TodoListDemoPure extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          id: 'id-1',
          title: '标题1'
        },
        {
          id: 'id-2',
          title: '标题2'
        },
        {
          id: 'id-3',
          title: '标题3'
        }
      ]
    }
  }
  render() {
    return <div>
      <Input submitTitle={this.onSubmitTitle} />
      <List list={this.state.list} />
    </div>
  }
  onSubmitTitle = (title) => {
    // 正确的用法
    this.setState({
      list: this.state.list.concat({
        id: `id-${Date.now()}`,
        title
      })
    })

    // // 为了演示 SCU ，故意写的错误用法
    // this.state.list.push({
    //     id: `id-${Date.now()}`,
    //     title
    // })
    // this.setState({
    //     list: this.state.list
    // })
  }
}

export default TodoListDemoPure
